<template>
  <div class="good-list">
    <header>
      <a href="javascript:;" class="list-icon1">
        <router-link to="/list"><i class="iconfont icon-up21"></i></router-link>
      </a>
      <a href="javascript:;" class="list-icon2">
        <i class="iconfont icon-kefu1"></i>
      </a>
      <h1>商品列表</h1>
    </header>
    <section>
      <div class="content">
        <div class="good-list-nav">
          <ul class="list-nav-ul">
            <li 
              v-for="(item,index) in data"
              :key="index"
              @click="handle(index)"
              :class="index==idx?'list-nav-active':''"
            >
              <span>{{item}}</span>
            </li>
            <!-- <li>
              <span>销量</span>
            </li>
            <li>
              <span class="list-nav-price">价格</span>
              <span class="list-nav-icon1">
                <span class="icon-price price-down"></span>
                <span class="icon-price price-up"></span>
              </span>
            </li>
            <li>
              <span>人气</span>
            </li> -->
            <li class="list-nav-cate" @click="handleSai">
              <i class="iconfont icon-leimupinleifenleileibie1"></i>
              <span>筛选</span>
            </li>
          </ul>
        </div>
        <ul class="good-list-ul" v-if="show">
          <li class="good-item" v-for="item in filterList" :key="item.goods_id">
           <router-link to="/detail/${item.browse}">
              <img
                  :src="item.cover"
                  alt=""
                  @click="jumpDetail(item.browse)"
              />
            </router-link>
            <p class="good-item-name">{{ item.goods_name }}</p>
            <p class="good-item-price">
              <span>￥ {{ item.sell_price }}</span>
              <button @click="handleAdd(item.browse)">
                <i class="iconfont icon-gouwuche"></i>
              </button>
            </p>
          </li>
        </ul>
        <div class="pagination" v-if="show">
          <!-- <span class="page">
            <span>1</span>
            <span>丨</span>
            <span>19</span>
          </span> -->
        </div>
        
        <div v-else>
          <p style="color:#999;font-size:18px;padding:10px 10px 10px 10px"> 
            <i class="iconfont icon-gouwuche1"></i>
            暂未找到你要查询的商品请稍后再试试！
         </p>
        </div>
      </div>
    </section>
    <!-- 筛选侧边栏 -->
    <!-- 蒙层 -->
    <GoodFilterPop v-if="isShow" @close-pop="isShow = false" />
    <!-- 底部组件 -->
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import GoodFilterPop from "./GoodFilterPop.vue";
import { getGoods } from "../api/goodList";
import {Toast} from 'vant'
export default {
  components: {
    Footer,
    GoodFilterPop,
  },
  data() {
    return {
      isShow: false,
      goodList:[],
      show:true,
      data:['新品','销量','价格','人气'],
      idx:0
    };
  },

 created () {
    let {num} = this.$route.params
    console.log(num)
   if(num<=5){
     getGoods(num).then(res=>{
       this.goodList=res.data.lists
       console.log(this.goodList)
     })
   }else{
     this.show=false
   }
 },
  
  

  created() {
    let { num } = this.$route.params;
    console.log(num);
    if (num) {
      getGoods(num).then((res) => {
        this.goodList = res.data.lists;
        // console.log(this.goodList);
        console.log(res.data.lists);
      });
    }
  },

  computed: {
    filterList() {
      let {goodList,idx} = this
      switch (idx) {
        case 1:
          return goodList.filter(item=>{
            return item.sell_price >100
          })
        case 2:
          return goodList.filter(item=>{
            return item.sell_price >500
          })
        case 3:
        return goodList.filter(item=>{
          return  item.sell_price >20&&item.sell_price<300
        })
      
        default:
          return goodList
      }
    }
  },

  methods: {
    handle(i){
      this.idx = i
    },
    handleSai() {
      this.isShow = true;
    },
    handleAdd(id){
      Toast('添加成功')
      let {goodList} = this
      let obj = null
      for(let i=0;i<goodList.length;i++){
        if(goodList[i].browse==id){
          obj = goodList[i]
        }
      }
      this.$store.commit('detail/cartAddMut',obj)
    },
    jumpDetail(id){
      let {goodList} = this
      let obj = null
      for(let i=0;i<goodList.length;i++){
        if(goodList[i].browse==id){
          obj = goodList[i]
        }
      }
      this.$store.commit('detail/deAddMut',obj)
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/goodList.css");
</style>